<extend name="./Public/base" />
<block name="title">学生答卷</block>
<block name="head">
    <load href="__PUBLIC__/Css/question.css"/>
    <load href="__PUBLIC__/Css/header.css"/>
</block>

<block name="main">
	<div class="navbar navbar-inverse">
		<ul class="nav navbar-nav nav-result">
            <li><a href="javasript:;">{$qus_name}</a></li>
        </ul>
	</div>
	<div class="loading">
		<i class="fa fa-spinner fa-spin fa-3x"></i>
	</div>
	<div class="container" id="stuResContainer" style="display:none">
		<div class="row page-title">
			<div class="col-md-1 col-md-offset-2">
				<span class="stu-name">{{ student.stu_name }}</span> 
			</div>
			<div class="col-md-2">
				<span class="text-muted">学号: {{ student.stu_number }}</span>
			</div>
			<div class="col-md-2 col-md-offset-3">
				<span class="stu-score">成绩: <strong class="text-danger">{{ student.stu_score }}</strong></span>
			</div>
		</div>
		<template v-for="que in questions">
			<div class="row">
				<!-- 判断题 -->
				<div class="col-md-8 col-md-offset-2">
					<div class="que-judge" >
						<div class="panel display-panel static">
							<div class="panel-body">
								<div class="box-title">
									<template v-if="que.que_type<4">
										<span class="is_cor glyphicon glyphicon-ok" v-if="que.is_correct=='1'"></span>
										<span class="is_cor glyphicon glyphicon-remove" v-else></span>
									</template>
									<span class="que-title">{{ que.que_num + "、" + typeValue[que.que_type] }}</span>
									<span class="que-score">分值 {{ que.que_score }}</span>
									<span class="text-danger" v-if="que.que_type==1 || que.que_type==2">答案 {{ que.que_answer | showItemCode }}</span>
									<span class="text-danger" v-else>答案 {{ que.que_answer }}</span>
								</div>
								<div class="box-body">
									<p>{{ que.que_content }}</p>
									<div class="radio" v-if="que.que_type==0" v-for="item in que.que_item">
										<label><input type="radio" v-bind:name="'display'+que.que_num" v-bind:value="$index" v-model="que.stu_answer" disabled>
											{{ item.content }}
										</label>
									</div>
									<div class="radio" v-if="que.que_type==1" v-for="item in que.que_item">
										<label>
											<input type="radio" v-bind:name="'display'+que.que_num" v-bind:value="$index" v-model="que.stu_answer" disabled>
											{{ $index | showItemCode }} {{ item.content }}
										</label>
									</div>
									<div class="checkbox" v-if="que.que_type==2" v-for="item in que.que_item">
										<label><input type="checkbox" v-bind:name="'display'+que.que_num" v-bind:value="$index" v-model="que.stu_answer" disabled>
											{{ $index | showItemCode }} {{ item.content }}
										</label>
									</div>
									<textarea v-if="que.que_type==3 || que.que_type==4" type="text" class="que-area-static que-content" rows="1" v-model="que.stu_answer" readonly></textarea>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</template>
	</div>
	<script type="text/javascript">
		function initVm(student, questions,quiz) {
			$("#stuResContainer").show();
			vm = new Vue({
				el: "#stuResContainer",
				data: {
					student: student,
					questions: questions,
					typeValue : ["判断题", "单选题", "多选题", "填空题", "简答题"],
					quiz: quiz,
				}
			})
		}

		$(function() {
			var qd = location.search.substring(1).split("&")[0].split("=")[1];
			var sd = location.search.substring(1).split("&")[1].split("=")[1];
			postApi("__MODULE__/StuQuiz/getStuQuizResult", {stu_id: sd, qus_id: qd}, function(err, data) {
				if (err) {
					showError(err.message);
				} else {
					var i,
						len = data.data.questions.length,
						questions = data.data.questions;
					for (i = 0; i < len; i++) {
						if (questions[i].que_type == 0) {
							questions[i].que_answer = questions[i].que_answer === 0 ? "错" : "对";
						}
						else if (questions[i].que_type == 2) {
							questions[i].que_answer = questions[i].que_answer.split("").map(function(item, index, array) {
								return item = parseInt(item)
							});
							questions[i].stu_answer = questions[i].stu_answer && questions[i].stu_answer.split("").map(function(item, index, array) {
								return item = parseInt(item)
							});
						} else if (questions[i].que_type == 3 || questions[i].que_type == 4) {
							if (questions[i].stu_answer === null) {
								questions[i].stu_answer = "[未作答]";
							}
						}
					}
					initVm(data.data.student, questions, data.data.quiz);
				}
			})
		})

		// 根据index值设置选项代码
		Vue.filter("showItemCode", function (index) {
			if (index.length > 1) {
				var retn = index.map(function(item, index, array) {
					return item = String.fromCharCode(65+parseInt(item));
				})
				retn = retn.join("、");
			} else {
				var retn = String.fromCharCode(65+parseInt(index));
			}
			return retn;
		})
	</script>
</block>